<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Nav - UIkit tests</title>

        <script src="../_test.js"></script>
        <style type="text/css">

            .uk-dropdown {
                display: block;
                position: relative;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                width: 100%;
            }

        </style>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Nav</h1>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-1">
                    <button class="uk-button" data-uk-offcanvas="{target:'#offcanvas-1'}">Offcanvas nav</button>
                </div>

                <div class="uk-width-medium-1-4">

                    <h3>Nav side</h3>
                    <ul class="uk-nav uk-nav-side">
                        <li class="uk-active"><a href="#">Active</a></li>

                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                                <li><a href="#">Sub item</a>
                                    <ul>
                                        <li><a href="#">Sub item</a></li>
                                        <li><a href="#">Sub item</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>

                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                                <li><a href="#">Sub item</a></li>
                            </ul>
                        </li>

                        <li><a href="#">Item <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></a></li>

                        <li class="uk-nav-header">Header</li>
                        <li><a href="#"><i class="uk-icon-star"></i> Item</a></li>
                        <li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li>
                        <li class="uk-nav-divider"></li>
                        <li><a href="#"><i class="uk-icon-rss"></i> Item</a></li>
                    </ul>

                </div>
                <div class="uk-width-medium-1-4">

                    <h3>Accordion</h3>
                    <ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav>
                        <li class="uk-active"><a href="#">Active</a></li>

                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                                <li><a href="#">Sub item</a>
                                    <ul>
                                        <li><a href="#">Sub item</a></li>
                                        <li><a href="#">Sub item</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>

                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                                <li><a href="#">Sub item</a></li>
                            </ul>
                        </li>

                        <li><a href="#">Item <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></a></li>

                        <li class="uk-nav-header">Header</li>
                        <li><a href="#"><i class="uk-icon-star"></i> Item</a></li>
                        <li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li>
                        <li class="uk-nav-divider"></li>
                        <li><a href="#"><i class="uk-icon-rss"></i> Item</a></li>
                    </ul>

                </div>
                <div class="uk-width-medium-1-4">

                    <h3>Multiple</h3>
                    <ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                        <li class="uk-active"><a href="#">Active</a></li>

                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                                <li><a href="#">Sub item</a>
                                    <ul>
                                        <li><a href="#">Sub item</a></li>
                                        <li><a href="#">Sub item</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>

                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                                <li><a href="#">Sub item</a></li>
                            </ul>
                        </li>

                        <li><a href="#">Item <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></a></li>

                        <li class="uk-nav-header">Header</li>
                        <li><a href="#"><i class="uk-icon-star"></i> Item</a></li>
                        <li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li>
                        <li class="uk-nav-divider"></li>
                        <li><a href="#"><i class="uk-icon-rss"></i> Item</a></li>
                    </ul>

                </div>
                <div class="uk-width-medium-1-4">

                    <div class="uk-panel uk-panel-box">

                        <h3 class="uk-panel-title">In panel</h3>

                        <ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav>
                            <li class="uk-active"><a href="#">Active</a></li>

                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a>
                                        <ul>
                                            <li><a href="#">Sub item</a></li>
                                            <li><a href="#">Sub item</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a></li>
                                </ul>
                            </li>

                            <li><a href="#">Item <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></a></li>

                            <li class="uk-nav-header">Header</li>
                            <li><a href="#"><i class="uk-icon-star"></i> Item</a></li>
                            <li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li>
                            <li class="uk-nav-divider"></li>
                            <li><a href="#"><i class="uk-icon-rss"></i> Item</a></li>
                        </ul>

                    </div>

                </div>

            </div>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-4">

                    <h3>Nav dropdown</h3>

                    <div class="uk-dropdown">

                        <ul class="uk-nav uk-nav-dropdown">
                            <li class="uk-active"><a href="#">Active</a></li>

                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a>
                                        <ul>
                                            <li><a href="#">Sub item</a></li>
                                            <li><a href="#">Sub item</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a></li>
                                </ul>
                            </li>

                            <li><a href="#">Item <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></a></li>

                            <li class="uk-nav-header">Header</li>
                            <li><a href="#"><i class="uk-icon-star"></i> Item</a></li>
                            <li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li>
                            <li class="uk-nav-divider"></li>
                            <li><a href="#"><i class="uk-icon-rss"></i> Item</a></li>
                        </ul>

                    </div>

                </div>
                <div class="uk-width-medium-1-4">

                    <h3>Accordion</h3>

                    <div class="uk-dropdown">

                        <ul class="uk-nav uk-nav-dropdown uk-nav-parent-icon" data-uk-nav>
                            <li class="uk-active"><a href="#">Active</a></li>

                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a>
                                        <ul>
                                            <li><a href="#">Sub item</a></li>
                                            <li><a href="#">Sub item</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a></li>
                                </ul>
                            </li>

                            <li><a href="#">Item <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></a></li>

                            <li class="uk-nav-header">Header</li>
                            <li><a href="#"><i class="uk-icon-star"></i> Item</a></li>
                            <li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li>
                            <li class="uk-nav-divider"></li>
                            <li><a href="#"><i class="uk-icon-rss"></i> Item</a></li>
                        </ul>

                    </div>

                </div>
                <div class="uk-width-medium-1-4">

                    <h3>Nav navbar</h3>

                    <div class="uk-dropdown uk-dropdown-navbar">

                        <ul class="uk-nav uk-nav-navbar">
                            <li class="uk-active"><a href="#">Active</a></li>

                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a>
                                        <ul>
                                            <li><a href="#">Sub item</a></li>
                                            <li><a href="#">Sub item</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a></li>
                                </ul>
                            </li>

                            <li><a href="#">Item <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></a></li>

                            <li class="uk-nav-header">Header</li>
                            <li><a href="#"><i class="uk-icon-star"></i> Item</a></li>
                            <li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li>
                            <li class="uk-nav-divider"></li>
                            <li><a href="#"><i class="uk-icon-rss"></i> Item</a></li>
                        </ul>

                    </div>

                </div>
                <div class="uk-width-medium-1-4">

                    <h3>Accordion</h3>

                    <div class="uk-dropdown uk-dropdown-navbar">

                        <ul class="uk-nav uk-nav-navbar uk-nav-parent-icon" data-uk-nav>
                            <li class="uk-active"><a href="#">Active</a></li>

                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a>
                                        <ul>
                                            <li><a href="#">Sub item</a></li>
                                            <li><a href="#">Sub item</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li class="uk-parent">
                                <a href="#">Parent</a>
                                <ul class="uk-nav-sub">
                                    <li><a href="#">Sub item</a></li>
                                    <li><a href="#">Sub item</a></li>
                                </ul>
                            </li>

                            <li><a href="#">Item <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></a></li>

                            <li class="uk-nav-header">Header</li>
                            <li><a href="#"><i class="uk-icon-star"></i> Item</a></li>
                            <li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li>
                            <li class="uk-nav-divider"></li>
                            <li><a href="#"><i class="uk-icon-rss"></i> Item</a></li>
                        </ul>

                    </div>

                </div>

            </div>

            <div id="offcanvas-1" class="uk-offcanvas">

                <div class="uk-offcanvas-bar">

                    <ul class="uk-nav uk-nav-offcanvas">
                        <li class="uk-active"><a href="#">Active</a></li>

                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                                <li><a href="#">Sub item</a>
                                    <ul>
                                        <li><a href="#">Sub item</a></li>
                                        <li><a href="#">Sub item</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>

                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                                <li><a href="#">Sub item</a></li>
                            </ul>
                        </li>

                        <li><a href="#">Item <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></a></li>

                        <li class="uk-nav-header">Header</li>
                        <li><a href="#"><i class="uk-icon-star"></i> Item</a></li>
                        <li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li>
                        <li class="uk-nav-divider"></li>
                        <li><a href="#"><i class="uk-icon-rss"></i> Item</a></li>
                    </ul>

                    <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>
                        <li class="uk-active"><a href="#">Active</a></li>

                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                                <li><a href="#">Sub item</a>
                                    <ul>
                                        <li><a href="#">Sub item</a></li>
                                        <li><a href="#">Sub item</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>

                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                                <li><a href="#">Sub item</a></li>
                            </ul>
                        </li>

                        <li><a href="#">Item <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></a></li>

                        <li class="uk-nav-header">Header</li>
                        <li><a href="#"><i class="uk-icon-star"></i> Item</a></li>
                        <li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li>
                        <li class="uk-nav-divider"></li>
                        <li><a href="#"><i class="uk-icon-rss"></i> Item</a></li>
                    </ul>

                </div>

            </div>

        </div>

    </body>
</html>